<!DOCTYPE html>
<html lang="zh">
<head>
    <:include file="./common/css.html" title="登录"/>
    <!-- 登 录 样 式 -->
    <link rel="stylesheet" href="/assets/css/other/login.css" />
</head>
<!-- 代 码 结 构 -->
<body background="admin/images/background.svg" style="background-size: cover;">
    <form class="layui-form" action="javascript:void(0);">
        <div class="layui-form-item">
            <img class="logo" src="/assets/images/logo.png" />
            <div class="title">Pear Admin</div>
            <div class="desc">
                明 湖 区 最 具 影 响 力 的 设 计 规 范 之 一
            </div>
        </div>
        <div class="layui-form-item">
            <input name="account" value="zetaAdmin" placeholder="账 号 : " type="text" lay-verify="required" hover class="layui-input" />
        </div>
        <div class="layui-form-item">
            <input name="password" value="admin" placeholder="密 码 : " type="password" lay-verify="required" hover class="layui-input"  />
        </div>
        <div class="layui-form-item">
            <input name="code" placeholder="验证码 : "  hover  lay-verify="required" class="code layui-input layui-input-inline" autocomplete="off" />
            <img src="/assets/captcha" class="codeImage" alt="" />
        </div>
        <div class="layui-form-item">
            <input type="checkbox" name="remember" title="记住密码" lay-skin="primary" checked>
        </div>
        <div class="layui-form-item">
            <button type="button" class="pear-btn pear-btn-success login" lay-submit lay-filter="login">
                登 录
            </button>
        </div>
    </form>

    <!-- 资 源 引 入 -->
    <:include file="./common/js.html" />
    <script>
        layui.use(['jquery', 'form', 'button', 'popup'], function() {
            var $ = layui.jquery;
            var form = layui.form;
            var button = layui.button;
            var popup = layui.popup;

            // 登 录 提 交
            form.on('submit(login)', function(data) {
                // 动画
                let loginBtn = button.load({ elem: '.login'})

                // 验证 remember有值则设置成true
                data.field.remember = !!data.field.remember

                // 登录
                $.post('/login', data.field, function (rsp) {
                    loginBtn.stop();
                    if (rsp.code !== 200) {
                        popup.failure(rsp.message);
                        return;
                    }
                    popup.success("登录成功", function() {
                        location.replace('/');
                    });
                }).error(function (error){
                    popup.failure("系统异常");
                    loginBtn.stop();
                });
                return false;
            });

            // 刷新验证码
            $('img.codeImage').click(function () {
                this.src = this.src + '?t=' + new Date().getTime()
            });
        });
    </script>
</body>
</html>
